<!DOCTYPE html>
<html style="height: 100%;width: 100%;">
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="../js/document/echarts.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
</head>
<body style="height: 100%; margin: 0">

<div id="container" style="height: 100%"></div>

</body>

<script>

    let arry1 = new Array();
    $.ajaxSettings.async = false;
    $.getJSON("/echarts/background", "", function (data) {
        console.log("echaer图data的数据--------------------" + JSON.stringify(data))

        $(data).each(function (i, v) {
            console.log("遍历的json数据=======================" + v.dp_id)
            arry1.push(v.dp_id);
        })
    })
    $.ajaxSettings.async = true;

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom, 'dark');
    var app = {};
    var option;
    option = {
        xAxis: {
            type: 'category',
            data: ['文件夹', 'Word文件', '图片', '记事本', 'PDF文件', 'xls文件', '压缩文件']
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: [arry1[0], arry1[1], arry1[2], arry1[3], arry1[4], arry1[5], arry1[6]],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                }
            }
        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</html>
    